<template>
  <bg v-if="type=='search'">
    <div class="status">
        Current status: {{`${current} / ${total}`}}
    </div>
    <div class="input-group">
        <input @blur="search" v-model="keywords" type="text">
    </div>
    <div class="user-list">
        <div :class="{
          'is_check':user.is_check == 1,

        }" @click="selectUser(user)" v-for="(user,index) in users" key="uuid" class="user-item">
            {{user.last_name||' '}} {{user.first_name||' '}}
        </div>
    </div>
  </bg>

  <bg v-else-if="type=='checkin'">
    <div class="status">
        Current status: {{`${current} / ${total}`}}
    </div>
    <div class="user-info">
        <div class="info user-name" ><div style="width: 130px;text-align: left;">NAME: </div> <div class="value">{{currentUser.last_name||'--'}} {{currentUser.first_name||'--'}} </div></div>
        <div class="info"><div style="width: 130px;text-align: left;">CATEGORY :</div><div class="value"> {{currentUser.category||'--'}}</div></div>
        <div class="info"><div style="width: 130px;text-align: left;">TITLE :</div><div class="value"> {{currentUser.title||'--'}}</div></div>
        <div class="info"><div style="width: 130px;text-align: left;">INVITED BY: </div> <div class="value">{{currentUser.invite_by||'--'}}</div></div>
      <!--  <div class="info user-area">Area: {{currentUser?.organization||'--'}}</div> -->
       <!-- <div class="info user-area">Area: {{currentUser?.seat_info?.floor||'floor'}} {{currentUser?.seat_info?.position||'position '}} {{currentUser?.seat_info?.row||'row '}} {{currentUser?.seat_info?.number||'number '}}</div> -->
    </div>
    <!-- {{scanText}} -->
    <div @click="goHome" class="btn btn-home"  >
       HOME
    </div>
    <div v-if="!currentUser.is_check" class="btn btn-checkin"  @click="checkin">
       CHECK-IN
    </div>
    <div v-else class="btn btn-checkin"  @click="cancelCheckin">
       CANCEL
    </div>
  </bg>

</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import Scanner from './scanner.vue'
  import bg from './bg.vue'
  import {eventCancelCheck,eventCheck,eventSearchUser,eventUser,eventInfo} from '../api';
  import { useRoute } from 'vue-router';

  const total = ref(0);
  const current = ref(0);
  const keywords = ref('');
  const users = ref([]);
  const type = ref('');
  const currentUser = ref({
    category: "",
    first_name: "",
    invite_by:"",
    is_check: 0,
    last_name: "",
    title: "",
    user_id:""
  });
  const sessionId = ref('');
  const route = useRoute();

  const search = async (callback=null)=>{

    if(!keywords.value){
      let res = (await eventUser({
        session_id:sessionId.value
      }));
      console.log(res.data,'data');
      if(res.data && res.data.users){
        users.value = res.data.users;
        console.log(users.value,'value')
      }else{
        users.value = res.data;
      }
    }else{

      currentUser.value = {};
      users.value = (await eventSearchUser({
        keyword:keywords.value,
        session_id:sessionId.value
      })).data||[];
    }

    currentUser.value = {};
    // callback && callback();
  }

  const goHome = ()=>{
    type.value = 'search';

  }

  const checkin = async ()=>{

    if(!currentUser.value.user_id){
      return alert('请选择一个用户');
    }

    let result = await eventCheck({
      session_id:sessionId.value,
      user_id:currentUser.value.user_id
    });
    if(result.code == 0){
      currentUser.value.is_check = 1;
      updateTotal();

    }else{
      return alert(result.message||'签到失败');
    }
  }

  const cancelCheckin = async ()=>{

    if(!currentUser.value.user_id){
      return alert('请选择一个用户');
    }

    let result = await eventCancelCheck({
      session_id:sessionId.value,
      user_id:currentUser.value.user_id
    });

    if(result.code == 0){
      currentUser.value.is_check = 0;
      updateTotal();
    }else{
      return alert(result.message||'取消签到失败');
    }
  }


  const selectUser = (res)=>{
    currentUser.value = res;
    type.value = 'checkin';
  }

  const startScan = ()=>{
    showScan.value = true;
    // scan('D9ML2FpIu/3mXRAQbXeftqm3LEM09V+sR0PbVmPoBk+duvccdtRk6ySLVH26zhOMxjvEAk/C1I0VhGdqc0oQHw==');
  }

  const scan = async (text)=>{
    showScan.value = false;
    scanText.value = text;
    let result = await checkInfo({
      qr_content:text
    });

    if(result.code != 0 ){
      return alert(result.message||'无效二维码');
    }else{
      selectUser(result.data);
    }
  }

  const sessionInfo = ref({});
  const updateSearch = ()=>{

  };
  const updateTotal = ()=>{
    eventInfo({
      session_id:sessionId.value
    }).then(res=>{
      sessionInfo.value = res.data;
      total.value = res.data.all_user;
      current.value = res.data.check_user;
    })
  }

  onMounted(()=>{
    clearInterval(window.timer);
    sessionId.value = route.query.sessionid;
    if(sessionId.value){
      type.value = 'search';
      updateTotal();
      search();
      window.timer = setInterval(()=>{
        updateTotal();
      },8000)
    }

  });


  defineProps({

  })


</script>

<style scoped lang="scss">
  .status{
    margin-top: 100px;
    font-size: 20px;
    color: rgba(142, 45, 56, 1);
  }
  .input-group{
    width: 1200px;
    height: 120px;
    padding: 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffff;
    border: 1px solid #000;
    border-radius: 40px;
    margin-top: 90px;
    overflow: hidden;
    input{
      width: 92%;
      height: 120px;
      line-height: 120px;
      background: #ffff;
      border:none;
      color: #000;
      text-align: center;
      font-size: 14px;
    }

    input:focus {
      outline: none;
    }
  }
  .user-info{
    color: #000;
    width: 1700px;
    height: 2000px;
    margin-top: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: scroll;
    font-size: 30px;
    .info{
      //background: #e2e2e2;
      padding: 30px 50px;
      width: 90%;
      display: flex;
      font-size: 16px;
      justify-content: space-between;
      align-items: center;
      div{
        text-align: center;
        white-space: nowrap; /* 保持文本在一行显示 */
        overflow: hidden; /* 隐藏超出容器的文本 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
        display: flex;
      }
    }
    .user-name{

    }

    .user-category{
      margin-top: 100px;
    }
    .user-area{
      margin-top: 200px;
    }
  }
  .user-list{
    width: 1600px;
    height: 2400px;
    margin-top: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: scroll;
    font-size: 20px;
    // background: red;
    .user-item{
      margin-top: 10px;
      width: 80%;
      height: 160px;
      line-height: 160px;
      text-align: center;
      border: 1px solid transparent;
      border-radius: 60px;
      color: #000;
      &.active{
        border: 1px solid rgb(142, 45, 56);
        border-radius: 0;
        background: rgb(142, 45, 56);
        color: #ffffff;
      }
      &.is_check{
      color: #999999;
    }
    }
  }

  .btn{
    width: 900px;
    height: 160px;
    line-height: 160px;
    border: 1px solid #000;
    border-radius: 60px;
    color: #000;
    text-align: center;
  }

  .btn-camera{
    margin-top: 160px;
  }
  .btn-home{
    margin-top: 120px;
  }
  .btn-checkin{
    margin-top: 80px;
  }
  .value{
    -webkit-line-clamp: 2; /* 限制在一个块元素显示的文本的行数 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden; /* 隐藏超出的内容 */
    text-overflow: ellipsis; /* 用省略号表示隐藏的内容 */
    white-space: normal !important;
    text-align: right !important;
  }
</style>
